<template>
    <div class="box">
        <heards title="分类"></heards>
        <van-row>
            <van-col span="6">
                <van-sidebar v-model="active">
                    <van-sidebar-item v-for="(v, i) in list" :key="i" :title="v.cat_name" />
                </van-sidebar>
            </van-col>

            <van-col span="17">
                <van-pull-refresh v-model="loading" @refresh="onRefresh">
                    <router-link to="/search">
                        <van-search v-model="title" placeholder="请输入搜索关键词" />
                    </router-link>
                    <div v-for="(v, i) in list[active]?.children" :key="i">
                        <p>{{ v.cat_name }}</p>
                        <van-grid :border="false" :column-num="3">
                            <van-grid-item v-for="(val, index) in v.children" :key="index">
                                <van-image
                                    :src="val.cat_icon ? val.cat_icon : 'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg'"
                                    style="width: 6rem;
                                height: 6rem;" />
                                <p>{{ val.cat_name }}</p>
                            </van-grid-item>
                        </van-grid>
                    </div>
                </van-pull-refresh>
            </van-col>
        </van-row>
    </div>
</template>

<script setup>
import heards from '@/assets/heards.vue';
import { ref, watch } from 'vue'
import { categoriesApi } from '@/api/api';
import { showToast } from 'vant';
const active = ref(0);
//分类
let list = ref([])
const categories = () => {
    categoriesApi().then((res) => {
        list.value = res.data.message
    })
}
categories()


const loading = ref(false);
const onRefresh = () => {
    setTimeout(() => {
        showToast('刷新成功');
        loading.value = false;
        categories()
    }, 1000);
};
</script>

<style lang="scss" scoped></style>